<template>
  <Thead
    :selectedDate="dateValue.value"
    @get="getDate"
    @backToDay="backToDay" />
  <Tbody @update="update" />
  <Tfoot />
</template>

<script setup>
import { ref, provide } from 'vue'
import Thead from './components/Thead.vue'
import Tbody from './components/Tbody.vue'
import Tfoot from './components/Tfoot.vue'
const nowDate = new Date()
const dateValue = ref({
  year: nowDate.getFullYear() /* 获取当前年份 */,
  month: nowDate.getMonth() + 1 /* 获取当前月份 */,
  day: nowDate.getDate() /* 获取当前日期 */,
})

const getDate = (value) => {
  dateValue.value.year = value.year
  dateValue.value.month = value.month
  dateValue.value.day = value.day
}
const update = (value) => {
  dateValue.value.day = value
  console.log(dateValue.value.day)
}
const backToDay = (value) => {
  dateValue.value.year = nowDate.getFullYear()
  dateValue.value.month = nowDate.getMonth() + 1
  dateValue.value.day = nowDate.getDate()
  value.year = nowDate.getFullYear()
  value.month = nowDate.getMonth() + 1
}

provide('dateValue', dateValue)
</script>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  padding: 50px;
}
</style>
